<template>
             <div>
               <el-card class="box-card">
                 <div slot="header" >
                   <span>选择事件大类</span>
                 </div>
                 <el-row :gutter="40" class="panel-group" style="height: 100px">
                   <el-col  v-for="(item,index) in data" :xs="12" :sm="12" :lg="6"  class="card-panel-col" @click.native="tiaozhuan(item)">
                     <div class="card-panel"   @click.native="tiaozhuan(item)">
                       <el-row :gutter="40" style="border: 1px solid black;color: white">
                         <el-col :span="8">
                           <el-image  style="height: 60px;width: 60px;margin-top: 50px;" :src="item.sysIcon"></el-image>
                         </el-col>
                         <el-col :span="16" :style="{backgroundColor: item.backgroud}">
                           <div style="font-size: x-large;height: 70px;line-height: 100px;text-align: center">{{item.name}}</div>
                           <div style="font-size: large;height: 70px;line-height: 50px;text-align: center">{{item.description}}</div>
                         </el-col>
                       </el-row>
                     </div>
                   </el-col>
                 </el-row>
                 <el-row :gutter="40" class="panel-group" style="height: 100px">
                   <el-col  v-for="(item,index) in data" :xs="12" :sm="12" :lg="6"  class="card-panel-col" @click.native="tiaozhuan(item)">
                     <div class="card-panel"   @click.native="tiaozhuan(item)">
                       <el-row :gutter="40" style="border: 1px solid black;color: white">
                         <el-col :span="8">
                           <el-image  style="height: 60px;width: 60px;margin-top: 50px;" :src="item.sysIcon"></el-image>
                         </el-col>
                         <el-col :span="16" :style="{backgroundColor: item.backgroud}">
                           <div style="font-size: x-large;height: 70px;line-height: 100px;text-align: center">{{item.name}}</div>
                           <div style="font-size: large;height: 70px;line-height: 50px;text-align: center">{{item.description}}</div>
                         </el-col>
                       </el-row>
                     </div>
                   </el-col>
                 </el-row>
               </el-card>
               <el-card  v-show="typeShow" class="box-card">
                 <div slot="header" >
                   <span>选择事件类型</span>
                 </div>
                 <el-row :gutter="40" class="panel-group" style="height: 120px">
                   <el-col  v-for="(item,index) in items" :xs="12" :sm="12" :lg="6"  class="card-panel-col" >
                     <div class="card-panel"   >
                       <el-row :gutter="40" style="border: 1px solid black;color: white" >
                         <el-col :span="8">
                           <el-image  style="height: 60px;width: 60px;margin-top: 50px;" :src="item.sysIcon"></el-image>
                         </el-col>
                         <el-col :span="16" :style="{backgroundColor: item.backgroud}">
                           <div style="font-size: x-large;height: 70px;line-height: 100px;text-align: center">{{item.name}}</div>
                           <div style="font-size: large;height: 70px;line-height: 50px;text-align: center">{{item.description}}</div>
                         </el-col>
                       </el-row>
                     </div>
                   </el-col>
                 </el-row>
               </el-card>
             </div>
</template>

<script>
  export default {
    name: 'eventSelect',
    data() {
      return {
           typeShow:false,
           items:[],
            data:[
              {
                name:"医疗事件",
                sysUrl:'',
                icon:'',
                description:'Medical care',
                backgroud:'#1ab394',
                children:[
                  {
                    name:'手术类',
                    sysUrl:'',
                    icon:'',
                    backgroud:'blue',
                    description:'Medical care',
                  },
                  {
                    name:'麻醉镇痛类',
                    sysUrl:'',
                    icon:'',
                    backgroud:'#1ab394',
                    description:'Medical care',


                  },
                  {
                    name:'其他医疗事件',
                    sysUrl:'',
                    icon:'',
                    backgroud:'orange',
                    description:'Medical care',


                  },
                  {
                    name:'治疗与处理类',
                    sysUrl:'',
                    icon:'',
                    backgroud:'red',
                    description:'Medical care',

                  }
                ]
              },
              {
                name:"护理事件",
                sysUrl:'',
                icon:'',
                description:'Medical care',
                backgroud:'blue',
                children:[
                  {
                    name:'手术类',
                    backgroud:'blue',
                  },
                  {
                    name:'麻醉镇痛类',
                    sysUrl:'',
                    icon:'',
                    description:'Medical care',


                  },
                  {
                    name:'其他医疗事件',
                    sysUrl:'',
                    icon:'',
                    description:'Medical care',


                  }
                ]
              },
              {
                name:"医疗事件",
                sysUrl:'',
                icon:'',
                description:'Medical care',
                backgroud:'red',
                children:[
                  {
                    name:'手术类',
                  },
                  {
                    name:'麻醉镇痛类',


                  },
                  {
                    name:'其他医疗事件',


                  },
                  {
                    name:'治疗与处理类',

                  }
                ]
              },
              {
                name:"护理事件",
                sysUrl:'',
                icon:'',
                backgroud:'orange',
                description:'Medical care',
                children:[
                  {
                    name:'手术类',
                  },
                  {
                    name:'麻醉镇痛类',


                  },
                  {
                    name:'其他医疗事件',


                  },
                  {
                    name:'治疗与处理类',

                  }
                ]
              },
              {
                name:"医疗事件",
                sysUrl:'',
                icon:'',
                backgroud:'orange',
                description:'Medical care',
                children:[
                  {
                    name:'手术类',
                  },
                  {
                    name:'麻醉镇痛类',


                  },
                  {
                    name:'其他医疗事件',


                  },
                  {
                    name:'治疗与处理类',

                  }
                ]
              },
              {
                name:"护理事件",
                sysUrl:'',
                icon:'',
                backgroud:'red',
                description:'Medical care',
                children:[
                  {
                    name:'手术类',
                  },
                  {
                    name:'麻醉镇痛类',


                  },
                  {
                    name:'其他医疗事件',


                  },
                  {
                    name:'治疗与处理类',

                  }
                ]
              },
              {
                name:"医疗事件",
                sysUrl:'',
                icon:'',
                backgroud:'blue',
                description:'Medical care',
                children:[
                  {
                    name:'手术类',
                  },
                  {
                    name:'麻醉镇痛类',


                  },
                  {
                    name:'其他医疗事件',


                  },
                  {
                    name:'治疗与处理类',

                  }
                ]
              },
              {
                name:"护理事件",
                sysUrl:'',
                icon:'',
                backgroud:'#1ab394',
                description:'Medical care',
                children:[
                  {
                    name:'手术类',
                  },
                  {
                    name:'麻醉镇痛类',


                  },
                  {
                    name:'其他医疗事件',


                  },
                  {
                    name:'治疗与处理类',

                  }
                ]
              },
            ]


      }
    },
    methods:{
      tiaozhuan(data){
         this.typeShow=true;
         this.items=data.children;
      }
    }
  }
</script>

<style scoped>

</style>
